<template>
  <div class="serarch-box">
     <div class="search-head">
      <van-icon name="arrow-left"  @click = "back" class="lt"/>
      <input type="text" placeholder="请输入关键信息" class="search-input" :value="inputcontent" @blur="inputval">
      <van-icon name="search" class="search-fd" />
      <div class="search-title" @click = "leap">搜索</div>
     </div>
     <div class="zuijin-search">
       <hgroup>
        <h3>最近搜索</h3>
        <span  @click = "delet()"><van-icon name="delete-o" /></span>
       </hgroup>
        <ul class="hot-ul">
        <li v-for="(zuijin,index) in zuijinarr" :key = "index" @click = "zuijinCcontent(zuijin)">{{zuijin}}</li>
       </ul>
     </div>
     <div class="hot-search">
       <h3>热门搜索</h3>
       <ul class="hot-ul">
        <li v-for="hot in hotlist" :key = "hot.wordid" @click = "hotCcontent(hot.keyword)">{{hot.keyword}}</li>
       </ul>
     </div>
  </div>
</template>
<script>
import axios from '@/Utils/server';
import { Dialog, Toast } from 'vant';

export default {
 name:"searchpage-vue",
 data() {
    return {
      value: '',
      hotlist:[],
      inputcontent:"",
      zuijinContent:"",
      arr:[]
    };
  },
  computed:{
   
  },
  methods:{
    back(){
      this.$router.go(-1)
    },
    hotCcontent(name){
       this.inputcontent = name;
       this.zuijinContent += name +' '
       localStorage.setItem("searchlist",this.zuijinContent)
      //点击跳转页面
      this.$router.push(`/searchResult/${name}`)
      // //改变公共值
      this.$store.commit("pushlaseSearch",name)
    },
    zuijinCcontent(name){
    
      this.$router.push(`/searchResult/${name}`)
    },
    delet(){
      Dialog.confirm({
      message: '亲,确认删除吗',
    }).then(() => {
        this.$store.commit("deleconfirmbuy")
        // arr = []
        Toast("删除成功")

      })
      .catch(() => {
      });
    
    },
    inputval(n){
       this.inputcontent = n.target.value
    },
    //点击搜索进行跳转
    leap(){
       //点击跳转页面
       if(this.inputcontent == ''){
         return
       }else{
        this.$router.push(`/searchResult/${this.inputcontent}`)
       }
    }
  },
  created(){
    let obj = {}
   let arr = this.$store.state.laseSearch
   arr.forEach(item => {
       obj[item] = 1
    });
    this. zuijinarr =[...Object.keys(obj)]
    axios.get("/api/pro/hotword").then(res=>{
    if(res.data.code == 200){
     this.hotlist = res.data.data
   }
   })
  }
}
</script>

<style scoped>
.search-head{
    height: 2.5rem;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
}
.lt,.search-title{
    height: 100%;
    line-height: 2.5rem;
    font-size: 1.25rem;
    text-align: center;
    width: 2.75rem;
    /* flex: 1; */
}
.search-title{
   font-size: .75rem;
   background-color: red;
   color: white;
   line-height: 1.5rem;
   font-weight: 700;
   width: 2.75rem;
   height: 1.5rem;
   margin-left: .75rem;
   margin-right: .5rem;
   
}
.search-input{
    height:1.5rem;
    border-radius: 1rem;
    border: none;
    background-color: rgb(233, 232, 232);
    font-size: .7rem;
    text-align: center;
    /* flex: 1; */
    flex: 2;
}
.zuijin-search,.hot-search{
    height: 4rem;
    background-color: #fff;
    padding-top: 1rem;
    box-sizing: border-box;
}
.hot-search{
    height:5.5rem;
}
h3{
    font-size:.75rem;
    margin-left: .5rem;
}
.hot-ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-left: .5rem;
    margin-top: .5rem;
}
.hot-ul li{
    width:2rem;
    border: 1px solid gray;
    text-align: center;
    height: 1rem;
    line-height: 1rem;
    color: gray;
    margin-right:.5rem;
    font-size: .6rem;
    margin-bottom: .5rem;
}
.search-fd{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left:4rem;
  font-size: 1rem;
  color: gray;
}
hgroup{
  display: flex;
  align-items: center;
  height: 1rem;
  line-height: 1rem;
}
</style>